<template>
  <a-modal
    :title="this.updateId == 0 ? '满减活动新增' : '满减活动编辑'"
    :visible="visible"
    centered
    :width="800"
    @ok="handleOk"
    @cancel="onAfterClose"
    okText="提交"
  >
    <div>
      <FormModel ref="ruleForm" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <FormModelItem label="商品名称" prop="phone">
          {{ name }}
        </FormModelItem>
        <FormModelItem>
          <span slot="label"><span style="color: red">*</span>满减数量</span>
          <a-input-number v-model="full_minus_num" allowClear :min="2" />
        </FormModelItem>
        <FormModelItem>
          <span slot="label"><span style="color: red">*</span>价格和库存</span>
          <a-table
            ref="table"
            :columns="attrColumns"
            :style="{ marginTop: '10px' }"
            bordered
            :dataSource="attr"
            size="small"
            :row-key="(r, i) => JSON.stringify(r)"
            :pagination="false"
          >
            <div slot="numDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
              <a-input-search
                @search="(e) => settingAll(e, setSelectedKeys, selectedKeys)"
                size="small"
                placeholder="批量设置"
              >
                <a-icon slot="enterButton" type="plus" />
              </a-input-search>
            </div>
            <span slot="attr_list" slot-scope="attr_list">
              <span style="margin-right: 4px" v-for="(item, index) of attr_list" :key="index">
                {{ item.attr_name }}
              </span>
            </span>
            <template slot="price" slot-scope="price, attrItem, attrIndex">
              <a-input-number
                style="display: inherit"
                size="small"
                :autoFocus="autoFocusData.type == 'price' && autoFocusData.index == attrIndex"
                :value="price"
                @change="(e) => handleChange(e, 'price', attrIndex)"
              />
            </template>
          </a-table>
        </FormModelItem>
      </FormModel>
    </div>
  </a-modal>
</template>

<script>
const attrColumns = [
  {
    title: '规格',
    dataIndex: 'attr_list',
    width: 200,
    scopedSlots: { customRender: 'attr_list' },
  },
  {
    title: '库存',
    dataIndex: 'num',
    width: 80,
    scopedSlots: {
      customRender: 'num',
    },
  },
  {
    title: '价格',
    dataIndex: 'price',
    width: 80,
    scopedSlots: {
      filterDropdown: 'numDropdown',
      filterIcon: 'numIcon',
      customRender: 'price',
    },
  },
]
import { FormModel } from 'ant-design-vue'
import { addOrEdit, details } from '@/api/goods/full_minus'
export default {
  components: {
    FormModel,
    FormModelItem: FormModel.Item,
  },
  props: {
    currentGood: {
      type: Object,
      default: () => {},
    },
    currentItem: {
      type: Object,
      default: () => {},
    },
    updateId: {
      type: String,
      default: '',
    },
    visible: {
      type: Boolean,
      default: false,
    },
    onHandleOk: {
      type: Function,
      default: () => ({}),
    },
    onAfterClose: {
      type: Function,
      default: () => ({}),
    },
  },
  watch: {
    updateId(val) {
      if (val) {
        this.full_minus_num = this.currentItem.full_minus_num;
      }
    },
    currentGood: {
      deep: true,
      handler(val) {
        this.name = this.currentGood.name
        this.attr = JSON.parse(this.currentGood.attr)
      },
    },
  },
  data() {
    return {
      attrColumns,
      autoFocusData: { type: '', index: 0 }, // 获取焦点参数
      attr: [],
      name: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      full_minus_num: 2,
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleChange(value, type, index) {
      this.autoFocusData = {
        type: type,
        index: index,
      }
      this.attr[index][type] = value === null ? '' : value
    },
    settingAll(e, setSelectedKeys, selectedKeys) {
      this.attr.forEach((element, index) => {
        this.attr[index][setSelectedKeys.column.dataIndex] = e
      })
    },
    handleOk() {
      let params = {
        id: this.updateId || null,
        attr: this.attr,
        goods_id: this.currentGood.id,
        full_minus_num: this.full_minus_num,
      }
      addOrEdit(params).then((res) => {
        if (res.code === 0) {
          this.$message.success({ content: res.msg, key: 'loading' })
          this.onHandleOk(true)
        } else {
          this.$message.error({ content: res.msg, key: 'loading' })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
</style>
